<!--
 * @Date: 2023-03-31 15:52:11
 * @LastEditTime: 2023-03-31 21:36:26
 * @FilePath: /NLK/src/views/withdrawCoin/components/withdrawCoinLogs.vue
 * 介绍:
-->
<script lang="ts" setup>
import {
  apiWithdrawCoinLogs,
  WithdrawCoinLogs,
} from "@@/api/module/pagingList";
import dayjs from "dayjs";
</script>

<template>
  <h3 class="MT-lg">{{ $t("ti-bi-ji-lu") }}</h3>
  <CrequestList min-height="750rem" :api="apiWithdrawCoinLogs">
    <template #item="{ item }: { item: WithdrawCoinLogs.ResItem }">
      <div class="listItem T-S-sm">
        <h3>{{ item.remark }}</h3>
        <Cgrid col="3" repeat="1fr">
          <CgridItem justify="start">{{ $t("shu-liang") }}</CgridItem>
          <CgridItem>{{ $t("zhuang-tai") }}</CgridItem>
          <CgridItem justify="end">{{ $t("shi-jian") }}</CgridItem>
          <CgridItem justify="start">
            {{ item.number }}{{ item.coin?.code }}
          </CgridItem>
          <CgridItem class="C-M1">{{ item.status_text }}</CgridItem>
          <CgridItem class="T-nowrap" justify="end">
            {{ dayjs(item.created_at).format("MM/DD HH:mm") }}
          </CgridItem>
        </Cgrid>
      </div>
    </template>
  </CrequestList>
</template>

<style lang="less" scoped>
.CrequestList {
  padding: var(--gap-md);
  border: 1rem solid var(--C-OT3);
  border-radius: var(--R-sm);
  .listItem {
    padding: var(--gap-md) 0;
    border-bottom: 1rem solid var(--C-OT3);
  }
}
</style>
